<template>
  <div class="sidebar" :class="{showProductList:showProductList}" @click="norun">
    <div class="sidebar-wrapper">
      <div class="product-all">
        <div class="product-all-wrapper" @click="goShowProductList">
          <span class="menu-icon">
            <font-awesome-icon icon="th"/>
          </span>
          <span class="menu-title">应用中心</span>
          <span class="sidebar-toolbar">
            <font-awesome-icon icon="chevron-right"/>
          </span>
        </div>
      </div>
      <ul class="sidebar-products">
        <li class="product-item" v-for="(menu,index) in menuShortcutList" :key="index" @click="openMenu(menu)">
          <span class="menu-icon">
            <font-awesome-icon :icon="menu.fontIcon"/>
          </span>
          <a class="menu-title">{{menu.name}}</a>
        </li>
      </ul>
    </div>
    <div class="sidebar-productList" id="allMeunPanel">
      <div class="sidebar-productList-close" @click="goHideProductList">
        <font-awesome-icon icon="times"/>
      </div>
      <div class="sidebar-productList-left">
        <div class="product-search">
          <span class="sidebar-icon-search-wrapper">
            <font-awesome-icon icon="search"/>
          </span>
          <input ref="search" type="text" class="product-search-input" placeholder="请输入关键词">
        </div>
        <div class="product-recent-visit menu-group">
          <dl>
            <dt>
              <h3>最近访问</h3>
            </dt>
            <dd v-for="(menu,index) in recentVisitMenu" :key="index">
              <a @click="openMenu(menu)">{{menu.name}}</a>
            </dd>
          </dl>
        </div>
        <div class="menu-group" v-for="(group,index) in myapptrees" :key="index">
          <dl>
            <dt>
              <h3>{{index}}</h3>
            </dt>
            <dd v-for="(menu,index) in group" :key="index">
              <a @click="openMenu(menu)">{{menu.name}}</a>
            </dd>
          </dl>
        </div>
      </div>
      <div class="sidebar-productList-right">
        <ul class="sidebar-category-nav">
          <li class="sidebar-category-nav-item" v-for="(group,index) in myapptrees" :key="index">
            <a href="javascript:;">{{index}}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showProductList: false,
      myapps: [],
      menuShortcutList: [],
      recentVisitMenu: []
    };
  },
  created() {
    this.getMenuShortcutList();
    this.getMenuRecentVisit();
    this.getMenu();
  },
  computed: {
    myapptrees: function() {
      var apptree = {};
      this.myapps.forEach(app => {
        var group = apptree[app.groupName];
        if (group == undefined) {
          apptree[app.groupName] = [];
        }
        apptree[app.groupName].push({
          id: app.id,
          name: app.appName,
          urlType: app.urlType,
          url: app.url
        });
        if (app.settings != undefined && app.settings != "") {
          var settings = JSON.parse(app.settings);
          this.$addmodel({ code: settings.model });
        }
      });
      return apptree;
    }
  },
  methods: {
    goShowProductList() {
      this.showProductList = !this.showProductList;
      if (this.showProductList) {
        this.goSearchFocus(this.$refs.search);
      }
    },
    goHideProductList() {
      this.showProductList = false;
    },
    norun(e) {
      e.stopPropagation();
    },
    goSearchFocus(e) {
      e.focus();
    },
    getMenuShortcutList() {
      // 我的常用菜单-左侧快捷菜单
      this.$http({
        url: this.$URL_ADDR.my.menu_shortcut,
        method: "GET"
      }).then(resp => {
        this.menuShortcutList = resp.data.data;
      });
    },
    getMenuRecentVisit() {
      // 我的最近操作菜单
      this.$http({
        url: this.$URL_ADDR.my.menu_recent_visit,
        method: "GET"
      }).then(resp => {
        this.recentVisitMenu = resp.data.data;
      });
    },
    getMenu() {
      // 我的菜单
      this.$http({
        url: "/core/api/my/apps",
        method: "GET"
      }).then(resp => {
        this.myapps = resp.data;
      });
    },
    openMenu(menu) {
      this.$router.push(menu.url);
      this.goHideProductList();
    }
  },
  mounted() {
    var that = this;
    document.addEventListener("click", function() {
      that.goHideProductList();
    });
  }
};
</script>

<style scoped>
.sidebar * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.sidebar {
  color: hsla(0, 0%, 100%, 0.65);
  background-color: #252a2f;
  bottom: 0px;
  display: block;
  font-size: 12px;
  left: 0px;
  margin: 0;
  padding: 0;
  position: fixed;
  text-size-adjust: 100%;
  top: 50px;
  width: 50px;
  z-index: 1020;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.sidebar .sidebar-wrapper {
  overflow: hidden;
  position: absolute;
  z-index: 999;
  width: 50px;
  top: 0;
  bottom: 0;
  background-color: #252a2f;
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.sidebar .sidebar-wrapper:hover {
  width: 230px;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.sidebar.showProductList .sidebar-wrapper {
  width: 230px;
}

.sidebar .product-all {
  padding: 4px 0;
  border-top: 1px solid hsla(0, 0%, 100%, 0.1);
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.1);
  width: 100%;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar .product-all .product-all-wrapper {
  cursor: pointer;
  line-height: 40px;
  height: 40px;
  font-size: 0;
}

.sidebar .sidebar-wrapper .menu-icon {
  width: 50px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}

.sidebar .sidebar-wrapper .menu-title {
  color: #fff;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  width: 178px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar .product-all .product-all-wrapper:hover {
  background-color: #00c1de;
  color: #fff;
}

.sidebar .product-all .product-all-wrapper .sidebar-toolbar {
  width: 50px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #ffffff;
  margin-left: -50px;
  font-size: 16px;
}

.sidebar .sidebar-products {
  height: calc(100% - 48px);
  width: calc(100% + 20px);
  overflow-y: auto;
  position: relative;
}

.sidebar .product-item {
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 0;
}
.sidebar .product-item .menu-title {
  font-size: 12px;
}
.sidebar .product-item:hover {
  background-color: #192129;
}
.sidebar .product-item:hover .menu-title {
  color: #00c1de;
}

.sidebar .sidebar-productList {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 960px;
  z-index: 99;
  background-color: #fff;
  -webkit-box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
  left: -960px;
  padding: 40px 30px;
  padding-bottom: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.sidebar.showProductList .sidebar-productList {
  left: 230px;
}

.sidebar .sidebar-productList .sidebar-productList-close {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
}

.sidebar .sidebar-productList .sidebar-productList-left {
  overflow: hidden;
  position: relative;
  height: 100%;
  overflow-y: auto;
  width: 110%;
}
.sidebar .sidebar-productList .product-search {
  position: fixed;
  background-color: #fff;
  z-index: 9;
}
.sidebar .sidebar-productList .product-search .sidebar-icon-search-wrapper {
  position: absolute;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #d9d9d9;
  font-size: 16px;
}
.sidebar .sidebar-productList .product-search .product-search-input {
  line-height: 32px;
  height: 32px;
  border: none;
  border-bottom: 1px solid #000;
  padding-left: 40px;
  width: 710px;
  font-size: 14px;
  opacity: 0.6;
  color: #595959;
}
.sidebar .sidebar-productList .product-search .product-search-input:focus {
  opacity: 1;
  border-bottom: 1px solid #00c1de;
  outline: 0;
}

.sidebar .sidebar-productList .product-recent-visit.menu-group {
  margin-top: 32px;
}

.sidebar .sidebar-productList .menu-group {
  overflow: hidden;
  width: 750px;
  margin-top: 0px;
}

.sidebar .sidebar-productList .menu-group h3 {
  font-size: 14px;
  color: #000;
  margin-top: 30px;
  margin-bottom: 12px;
  line-height: 1;
  font-weight: 600;
  padding: 0 10px;
}
.sidebar .sidebar-productList .menu-group dd {
  float: left;
  width: 230px;
  margin-right: 10px;
  position: relative;
}
.sidebar .sidebar-productList .menu-group dd a {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  display: block;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.65;
}
.sidebar .sidebar-productList .menu-group dd .sidebar-icon-star-wrapper {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  padding: 10px;
  cursor: pointer;
}

.sidebar .sidebar-productList .sidebar-productList-right {
  position: absolute;
  top: 122px;
  left: 770px;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.sidebar
  .sidebar-productList
  .sidebar-productList-right
  .sidebar-category-nav
  .sidebar-category-nav-item {
  line-height: 32px;
  height: 32px;
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
  text-overflow: ellipsis;
}
.sidebar
  .sidebar-productList
  .sidebar-productList-right
  .sidebar-category-nav
  .sidebar-category-nav-item.sidebar-category-nav-item-active,
.sidebar
  .sidebar-productList
  .sidebar-productList-right
  .sidebar-category-nav
  .sidebar-category-nav-item:hover {
  border-left: 2px solid #00c1de;
  margin-left: -2px;
  cursor: pointer;
}
.sidebar
  .sidebar-productList
  .sidebar-productList-right
  .sidebar-category-nav
  .sidebar-category-nav-item
  a {
  color: #595959;
}
.sidebar
  .sidebar-productList
  .sidebar-productList-right
  .sidebar-category-nav
  .sidebar-category-nav-item
  a:hover {
  color: #00c1de;
}
</style>